<template>
	<view class="content-box">
		<view class="fixed">
			<view class="content1">
				<Head></Head>
			</view>
			<view class="content2">
				<Banner></Banner>
			</view>
		</view>

		<swiper :indicator-dots="false" @change="gaibian" :autoplay="false" :interval="3000" disable-touch="false" :duration="500" class="swiper-box" :current="current" :style="{'height':swiperHeight+'px'}">
			
			<swiper-item>
				<view class="swiper-item box1">
					<i class="left-btn iconfont">&#xe61e;</i>
					<i class="right-btn iconfont" @click="rightBtn">&#xe61f;</i>
					<!-- <view>
						<text>欢迎访问</text>
						<text>牛津国际教育集团</text>
						<view class="line1"></view>
						<text>WELCOME TO OXFORD INTERNATIONAL</text>
					</view>
					<view>
						<text>学无止境<br>Learning without Limits</text>
					</view> -->
					<view class="sanjiao">
						<view >
							<image src="../../static/down.png" mode="widthFix" class="down-jiantou">
						</view>
					 </view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item box2">
					<i class="left-btn iconfont" @click="leftBtn">&#xe61e;</i>
					<i class="right-btn iconfont" @click="rightBtn">&#xe61f;</i>
					<!-- <view>
						<text></text>
						<text>学校&学院</text>
						<view class="line1"></view>
						<text>英国知名大学GCSE、A-Level、BTEC课程及嵌入式学院</text>
					</view>
					<view>
						<text>更多详情</text>
					</view> -->
					<view class="sanjiao">
						<view >
							<image src="../../static/down.png" mode="widthFix" class="down-jiantou">
						</view>
					 </view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item box3">
					<i class="left-btn iconfont" @click="leftBtn">&#xe61e;</i>
					<i class="right-btn iconfont" >&#xe61f;</i>
					<!-- <view>
						<text></text>
						<text>合作大学</text>
						<view class="line1"></view>
						<text>通向英国高等教育的桥梁：国际联合学位课程</text>
					</view>
					<view>
						<text>更多详情</text>
					</view> -->
					<view class="sanjiao">
						<view >
							<image src="../../static/down.png" mode="widthFix" class="down-jiantou">
						</view>
					 </view>
				</view>
			</swiper-item>
		</swiper>
		
		
		<!-- jieshao -->
		<view class="jieshao">
		      <view class="jieshao-box">
		        <text class="cibiao">欢迎访问</text>
		        <text class="zhubiao">牛津国际教育集团</text>
		        <text class="zhengwen">
		          牛津国际教育集团是一家独具特色、经资质认证的教育服务提供商，致力于为世界各地的学生提供内容充实、受益终生的学习体验。我们在英国、加拿大和美国开设面向成人和青少年学生的英语语言学校、<!-- 私立寄宿学校、 -->短期学术课程、大学预科课程、TESOL教师培训课程和各类线上课程。</text>
		        <text class="zhengwen">我们注重课程质量，致力于成为教育服务领域首屈一指的服务提供商。我们的工作团队热情、敬业、志同道合，满腔热忱对待我们的工作。</text>
		        <text class="zhengwen">而且，大家都是非常友善的人。</text>
		      </view>
		    </view>
				
				
				
				<!-- 新闻版块 -->
				<view class="news-box">
				      <view class="news-box-rongqi">
				        <text class="news-biaoti">最新动态</text>
				        <view class="news-main">
				          <view class="news-details" v-for="(i,index) in newsList" :key="index" @click="detail(i.id)">
				            <view class="news-pic">
				              <image :src="url+i.thumb" mode="aspectFill">
				            </view>
				            <view class="news-dec">
				              <text class="news-title">{{i.title}}</text>
				              <view class="line"></view>
				              <text class="news-dec1" style="word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{i.description}}</text>
				            </view>
				
				<!--            <span>阅读全文</span>-->
				          </view>
				        </view>
				      </view>
				    </view>
				
				<Foot></Foot>
	</view>
</template>

<script>
	import Head from '@/components/head.vue'
	import Banner from '@/components/banner.vue'
	import Foot from '@/components/foot.vue'
	export default {
		data() {
			return {
				current:0,
				title: 'Hello',
				swiperHeight: 0,
				newsList:[],
				url:'http://nj.donglianguoji.com'
			}
		},
		onLoad() {
			let H = window.innerHeight
			let W = window.innerWidth
			this.swiperHeight = H
			/* if (W>750) {
				
			} else{
				this.swiperHeight = 300
			} */
			uni.request({
				url:'http://nj.donglianguoji.com/index/getNews?catId=46&page=1&limit=4',
				method:'GET',
				data:{},
				success: (res) => {
					this.newsList = res.data.data
				}
			})
		},
		computed:{
			
		},
		components: {
			Head,
			Banner,
			Foot
		},
		methods: {
			gaibian(e){
				console.log(e)
			},
			leftBtn(){
				this.current--
			},
			rightBtn(){
				this.current++
				// console.log(1111)
			},
			detail(id){
				uni.navigateTo({
					url:'../detail/detail?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
	  font-family: 'iconfont';  /* project id 2160786 */
	  src: url('//at.alicdn.com/t/font_2160786_9tyc6ttxk9w.eot');
	  src: url('//at.alicdn.com/t/font_2160786_9tyc6ttxk9w.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_2160786_9tyc6ttxk9w.woff2') format('woff2'),
	  url('//at.alicdn.com/t/font_2160786_9tyc6ttxk9w.woff') format('woff'),
	  url('//at.alicdn.com/t/font_2160786_9tyc6ttxk9w.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_2160786_9tyc6ttxk9w.svg#iconfont') format('svg');
	}
	.iconfont{
	    font-family:"iconfont" !important;
	    font-size:16px;font-style:normal;
	    -webkit-font-smoothing: antialiased;
	    -webkit-text-stroke-width: 0.2px;
	    -moz-osx-font-smoothing: grayscale;}
	.content-box {
		position: relative;
	}

	.fixed {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 10;
	}

	.content1 {
		background: rgba(48, 48, 48, .73);
	}

	.content2 {
		/* max-width: 1200px; */
		background: #fff;
		margin: 0 auto;
	}

	.swiper-box {
		position: relative;
	}
.swiper-item{
	position: relative;
}
.left-btn{
	font-size: 50px;
	color: #fff;
	width: 50px;
	height: 100px;
	background: rgba(255,255,255,.3);
	line-height: 100px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}
.right-btn{
	font-size: 50px;
	color: #fff;
	width: 50px;
	height: 100px;
	background: rgba(255,255,255,.3);
	line-height: 100px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}
/* .swiper-item>view:nth-of-type(1){
    margin: 60px 0;
    margin-bottom: 35px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.65);
    padding: 20px 35px;
  }
  .swiper-item>view:nth-of-type(1) text:nth-of-type(1){
    font-size: 17px;
    color: #303030;
    margin-bottom: 20px;
  }
  .swiper-item>view:nth-of-type(1) text:nth-of-type(2){
    font-size: 25px;
    font-weight: bold;
    color: #303030;
  }
  .swiper-item>view:nth-of-type(2){
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    background: #303030;transition: all .4s ease;cursor: pointer;
  }
  .swiper-item>view:nth-of-type(2) text{



    line-height: 32px;
    font-size: 18px;
    color: #fff;
  }
  .swiper-slide>view:nth-of-type(2):hover{
    background: #3281c4;
  } */
  .box{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 100px;*/
  }
  .box1{
    // background: url("../../static/UP-1.jpg") no-repeat center center;
    background: url("../../static/banner1.jpg") no-repeat center top;
		background-size: auto 100%; 
  }
  .box2{
    // background: url("../../static/UP-2.jpg") no-repeat center center;
		background: url("../../static/banner2.jpg") no-repeat center top;
		background-size: auto 100%; 
  }
  .box3{
    // background: url("../../static/UP-3.jpg") no-repeat center center;
		background: url("../../static/banner3.jpg") no-repeat center top;
		background-size: auto 100%; 
  }
	.sanjiao{
	    position: absolute;
	    left: 50%;
			width: 120px;
			height: 120px;
			background: url(../../static/sanjiao.png) no-repeat center bottom;
			background-size: 100% auto;
	    transform: translateX(-50%);
	    bottom: 0px;
	    z-index: 222;
	    
			view{
				position: relative;
				width: 100%;
				height: 100%;
			}
	    .down-jiantou {
	      display: block;
				position: absolute;
				left: 50%;
				margin-left: -19px;
	      width: 38px;
	      animation: shangxia 0.7s linear infinite;
	    }
	    @keyframes shangxia {
	      0% {bottom: 9px}
	      50%{bottom: 3px}
	      100%{bottom: 9px}
	    }
	  }
		.jieshao{
			max-width: 730px;
			margin: 0 auto;
		    .jieshao-box{
		      // width: 730px;
		      margin: 0 auto;
		      padding: 60px 0;
		      display: flex;
		      flex-direction: column;
		      align-items: center;
		      text-align: center;
		      .cibiao{
		        font-size: 25px;
		        font-weight: 300;
		        line-height: 35px;
		        color: #303030;
		        margin-bottom: 20px;
		      }
		      .zhubiao{
		        font-size: 35px;
		        font-weight: bold;
		        line-height: 55px;
		        color: #303030;
		        margin-bottom: 30px;
		      }
		      .zhengwen{
		        font-size: 20px;
		        line-height: 45px;
		        // font-weight: 300;
		        color: #303030;
		        margin-bottom: 35px;
		      }
		    }
		  }
			.news-box{
			  background: url("../../static/news_background.jpg") no-repeat center center;
			}
			  .news-box-rongqi{
			    max-width: 900px;
			
			    margin: 0 auto;
			    padding: 80px 0;
			    display: flex;
			    flex-direction: column;
			    .news-biaoti{
			      font-size: 30px;
			      line-height: 45px;
			      font-weight: 700;
			      text-align: center;
			      display: block;
			      padding-bottom: 20px;
			      position: relative;
			      color: #fff;
			    }
			    .news-biaoti:before{
			      content: '';
			      position: absolute;
			      width: 5%;
			      height: 4px;
			      /*background: #303030;*/
			      background: #fff;
			      left: 50%;
			      transform: translateX(-50%);
			      bottom: 8px;
			    }
			    .news-main{
			      margin-top: 60px;
			      display: flex;
			      flex-direction: row;
			      flex-wrap: wrap;
			      justify-content: space-between;
			
			    }
			  }
			
			  .news-pic{
			    /*width: 384px;*/
			    /*height: 150px;*/
			    image{
			      width: 100%;
						height: 200px;
			      /*margin-bottom: 20px;*/
			    }
			  }
			  .news-dec{
			    padding: 10px 30px 20px 30px;
			    position: relative;
			  }
			  .news-dec:before{
			    content: '';
			    position: absolute;
			    width: 20px;
			    height: 20px;
			    left: 50%;
			    margin-left: -10px;
			    background: #fff;
			    top: -10px;
			    transform: rotate(45deg);
			    z-index: 999;
			  }
			  .news-details{
			    background: #fff;
			    transition: all 0.3s linear;
			
			    /*padding: 15px;*/
			    display: flex;
			    cursor: pointer;
			    transition: all .5s ease;
			    flex-direction: column;
			    width: 45%;
			    font-size: 16px;
			    margin-bottom: 80px;
			    color: #303030;
			    .news-title{
			      display: flex;
			      position: relative;
			      font-weight: bold;
			      width: 100%;
			      white-space: nowrap;
			      overflow: hidden;
			      text-overflow: ellipsis;
			      line-height: 25px;
			      text-align: center;
			      margin-top: 20px;
			      /*margin-bottom: 30px;*/
			    }
			    .line{
			      width: 10%;
			      height: 3px;
			      background: #303030;
			      margin: 15px auto 15px auto;
			    }
			
			    .news-dec1{
			      word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
			      font-size: 13px;
			      line-height: 35px;
			      /*margin-bottom: 20px;*/
			    }
			    .news-more{
			      text-align: right;
			      font-size: 14px;
			    }
			  }
			  .news-details:hover{
			    /*background: rgba(255,255,255,.4);*/
			    box-shadow: 0 0 20px rgba(0,0,0,.4);
			  }
			
			
			  .line1{
			    width: 40px;
			    height: 3px;
			    background: #303030;
			    margin: 15px auto;
			  }
	@media screen and (max-width: 750px) {
		.content {}
		.news-box-rongqi{
			// margin-top: 30px;
			padding-top: 30px;
		}
		.news-main{
		  margin-top: 20px !important;
		  display: flex;
		  flex-direction: column !important;
			align-items: center;
					.news-details{width: 90%;margin-bottom: 20px;}
		}
		.box1{
		  background: url("../../static/banner1.jpg") no-repeat center top;
			background-size: auto 100%; 
		}
		.box2{
		  background: url("../../static/banner2.jpg") no-repeat center top;
			background-size: auto 100%; 
		}
		.box3{
		  background: url("../../static/banner3.jpg") no-repeat center top;
			background-size: auto 100%; 
		}
		.sanjiao{
			// display: none;
		}
		.left-btn{
			font-size: 20px;
			color: #fff;
			width: 30px;
			height: 50px;
			background: rgba(255,255,255,.3);
			line-height: 50px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 999;
		}
		.right-btn{
			font-size: 20px;
			color: #fff;
			width: 30px;
			height: 50px;
			background: rgba(255,255,255,.3);
			line-height: 50px;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 999;
		}
		.jieshao{
			max-width: 730px;
			margin: 0 auto;
		    .jieshao-box{
		      // width: 730px;
		      margin: 0 auto;
		      padding: 30px 0;
		      display: flex;
		      flex-direction: column;
		      align-items: center;
		      text-align: left;
		      .cibiao{
		        font-size: 25px;
		        // font-weight: 300;
		        line-height: 35px;
		        color: #303030;
		        margin-bottom: 20px;
		      }
		      .zhubiao{
		        font-size: 25px;
		        font-weight: bold;
		        line-height: 36px;
		        color: #303030;
		        margin-bottom: 30px;
		      }
		      .zhengwen{
						width: 90%;
		        font-size: 15px;
		        line-height: 35px;
		        // font-weight: 300;
		        color: #303030;
		        margin-bottom: 35px;
						text-align: left;
		      }
		    }
		  }
	}
</style>
